<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            display: flex;
        }

        .box {
            margin: auto;
            background-color: #eee;
            /* overflow: hidden; */
        }

        img {
            /* display: block; */
            /* width: 200px; */
            /* height: 200px; */
            /* background-color: #333; */
            background-image: linear-gradient(45deg, #3ca97b, #3fa7ba);
            /* filter: hue-rotate(180deg) brightness(1.5); */
            /* color: pink; */
            /* filter: drop-shadow(200px 0 rgb(226, 111, 111)); */
            /* transform: translateX(-200px); */
            /* overflow: hidden; */
        }

        .mask {
            width: 200px;
            height: 200px;
            -webkit-mask: url(./react.svg) 0 0/200px 200px;
            mask: url(./react.svg) 0 0/200px 200px;
            background-image: linear-gradient(45deg, #3ca97b, #3fa7ba);
            /* background-color: #eee; */
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- <img src="./react.svg" alt=""> -->
        <div class="mask">test</div>
    </div>
</body>

</html>